<template>
  <div class="bg-white border border-slate-200 rounded-lg p-4">
    <div class="flex items-center justify-between mb-4">
      <h3 class="font-semibold text-slate-800 flex items-center">
        <div :class="panel.iconBg" class="w-8 h-8 rounded-lg flex items-center justify-center mr-3">
          <i :class="panel.icon" class="text-white"></i>
        </div>
        {{ panel.title }}
      </h3>
      <div class="flex items-center space-x-2">
        <span :class="panel.stepBadge" class="px-2 py-1 text-xs rounded-full">
          {{ panel.step }}
        </span>
        <span class="text-xs text-slate-500">{{ formatTime(panel.timestamp) }}</span>
      </div>
    </div>
    
    <div class="space-y-3">
      <div class="bg-green-50 p-3 rounded-lg">
        <h4 class="font-medium text-green-800 mb-2">数据提取完成</h4>
        <div class="text-sm text-green-700 space-y-1">
          <div class="flex items-center space-x-2">
            <i class="fas fa-check-circle text-green-500"></i>
            <span>✓ 图像预处理完成</span>
          </div>
          <div class="flex items-center space-x-2">
            <i class="fas fa-check-circle text-green-500"></i>
            <span>✓ 边缘检测完成</span>
          </div>
          <div class="flex items-center space-x-2">
            <i class="fas fa-check-circle text-green-500"></i>
            <span>✓ 特征点提取完成</span>
          </div>
          <div class="flex items-center space-x-2">
            <i class="fas fa-check-circle text-green-500"></i>
            <span>✓ 数据结构化完成</span>
          </div>
        </div>
      </div>
      
      <div class="bg-blue-50 p-3 rounded-lg">
        <h4 class="font-medium text-blue-800 mb-2">提取数据统计</h4>
        <div class="text-sm text-blue-700 space-y-2">
          <div class="flex items-center justify-between">
            <span>提取特征点：</span>
            <span class="font-medium">2,847个</span>
          </div>
          <div class="flex items-center justify-between">
            <span>边界框数量：</span>
            <span class="font-medium">45个</span>
          </div>
          <div class="flex items-center justify-between">
            <span>有效区域：</span>
            <span class="font-medium">92.3%</span>
          </div>
          <div class="flex items-center justify-between">
            <span>处理时间：</span>
            <span class="font-medium">0.8秒</span>
          </div>
        </div>
      </div>
      
      <div class="bg-purple-50 p-3 rounded-lg">
        <h4 class="font-medium text-purple-800 mb-2">数据质量评估</h4>
        <div class="text-sm text-purple-700 space-y-1">
          <div class="flex items-center justify-between">
            <span>特征精度：</span>
            <span class="font-medium">96.5%</span>
          </div>
          <div class="flex items-center justify-between">
            <span>完整度：</span>
            <span class="font-medium">98.2%</span>
          </div>
          <div class="flex items-center justify-between">
            <span>一致性：</span>
            <span class="font-medium">94.8%</span>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 处理时间信息 -->
    <div v-if="panel.extraInfo" class="flex items-center justify-between p-3 bg-slate-50 rounded-lg mt-4">
      <span class="text-sm text-slate-600">处理完成时间</span>
      <span class="text-sm font-medium text-slate-800">{{ formatTime(panel.timestamp) }}</span>
    </div>
  </div>
</template>

<script setup lang="ts">
import type { ResultPanel } from '../../types/home'
import { formatTime } from '../../utils/home'

interface Props {
  panel: ResultPanel
  conversationType: string
}

defineProps<Props>()
</script>